<template>
  <div class="consumer-container">
    <!-- 顶部导航栏 -->
    <header class="consumer-header">
      <div class="header-left">
        <button class="back-home-btn" @click="handleGoHome">
          <i class="fa fa-home"></i> 返回首页
        </button>
        <h1 class="app-title">校园美食选购</h1>
      </div>
      
      <!-- 搜索框 -->
      <div class="header-search">
        <div v-if="!isSearching" class="search-box">
          <input 
            type="text" 
            v-model="searchKey" 
            placeholder="搜索店铺..." 
            class="search-input"
            @keyup.enter="handleSearch"
          >
          <button class="search-btn" @click="handleSearch">
            <i class="fa fa-search"></i>
          </button>
        </div>
        
        <button 
          v-else 
          class="back-btn" 
          @click="resetSearch"
        >
          <i class="fa fa-arrow-left"></i> 返回全部
        </button>
      </div>
      
      <div class="header-right">
        <button class="logout-btn" @click="handleLogout">
          <i class="fa fa-sign-out"></i> 退出登录
        </button>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="consumer-main">
      <!-- 双列布局：左侧店铺区，右侧订单区 -->
      <div class="main-layout">
        <!-- 左侧：店铺列表区 -->
        <div class="store-section" :class="{ 'store-section-shifted': isOrderMode }">
          <!-- 加载状态 -->
          <div v-if="isLoading" class="loading-state">
            <i class="fa fa-circle-o-notch fa-spin"></i>
            <p>加载店铺与菜品中...</p>
          </div>

          <!-- 错误提示 -->
          <div v-if="errorMessage" class="error-state">
            <i class="fa fa-exclamation-circle"></i>
            <p>{{ errorMessage }}</p>
            <button class="reload-btn" @click="fetchBusinessStores">重新加载</button>
          </div>

          <!-- 店铺列表 -->
          <div v-if="!isLoading && !errorMessage" class="store-list">
            <!-- 空状态 -->
            <div v-if="displayStores.length === 0" class="empty-store-state">
              <i class="fa fa-store"></i>
              <p>{{ isSearching ? '未找到匹配的店铺' : '当前暂无营业中的店铺' }}</p>
              <p class="tip">{{ isSearching ? '请尝试其他关键词' : '请稍后再试~' }}</p>
            </div>

            <!-- 店铺卡片 -->
            <div 
              class="store-card" 
              v-for="store in displayStores" 
              :key="store.id"
              v-show="!isOrderMode || currentOrderStoreId === store.id"
            >
              <!-- 店铺基本信息 -->
              <div 
                class="store-header" 
                @click="toggleStoreMenu(store.id)"
              >
                <div class="store-info">
                  <!-- 店铺图片 -->
                  <div class="store-img-container">
                    <img 
                      :src="store.image ? `/file${store.image}` : defaultStoreImg" 
                      alt="店铺图片" 
                      class="store-img"
                    >
                  </div>
                  
                  <!-- 店铺名称、地址 -->
                  <div class="store-detail">
                    <h3 class="store-name">{{ store.name }}</h3>
                    <div class="store-meta">
                      <span class="store-location">
                        <i class="fa fa-map-marker"></i> {{ store.location || '未设置地址' }}
                      </span>
                      <span class="store-owner">
                        <i class="fa fa-user"></i> 店主：{{ store.user_name }}
                      </span>
                    </div>
                  </div>
                </div>
                
                <!-- 展开/收起图标 -->
                <div class="store-toggle">
                  <i 
                    class="fa" 
                    :class="expandedStoreId === store.id ? 'fa-chevron-up' : 'fa-chevron-down'"
                  ></i>
                </div>
              </div>

              <!-- 菜品列表 -->
              <div 
                class="store-menu" 
                v-if="expandedStoreId === store.id"
              >
                <!-- 菜品加载状态 -->
                <div v-if="store.isMenuLoading" class="menu-loading">
                  <i class="fa fa-circle-o-notch fa-spin"></i>
                  <p>加载菜品中...</p>
                </div>

                <!-- 菜品错误状态 -->
                <div v-if="store.menuError" class="menu-error">
                  <i class="fa fa-exclamation-circle"></i>
                  <p>{{ store.menuError }}</p>
                  <button class="reload-menu-btn" @click="fetchStoreMenu(store.id)">重新加载</button>
                </div>

                <!-- 菜品列表（无菜品） -->
                <div v-if="!store.isMenuLoading && !store.menuError && store.commodities.length === 0" class="empty-menu-state">
                  <i class="fa fa-cutlery"></i>
                  <p>该店铺暂无菜品在售</p>
                </div>

                <!-- 菜品列表（有菜品） -->
                <div 
                  class="commodity-list" 
                  v-if="!store.isMenuLoading && !store.menuError && store.commodities.length > 0"
                >
                  <div 
                    class="commodity-item" 
                    v-for="commodity in store.commodities" 
                    :key="commodity.id"
                  >
                    <!-- 菜品图片 -->
                    <div class="commodity-img-container">
                      <img 
                        :src="commodity.image ? `/file${commodity.image}` : defaultCommodityImg" 
                        alt="菜品图片" 
                        class="commodity-img"
                      >
                    </div>

                    <!-- 菜品信息 -->
                    <div class="commodity-info">
                      <h4 class="commodity-name">{{ commodity.name }}</h4>
                      <div class="commodity-price">¥{{ formatPrice(commodity.price) }}</div>
                      <!-- 菜品状态标签 -->
                      <div 
                        class="commodity-status" 
                        :class="commodity.status === 1 ? 'status-on-sale' : 'status-sold-out'"
                      >
                        {{ commodity.status === 1 ? '在售' : '已售完' }}
                      </div>
                    </div>

                    <!-- 选购按钮 -->
                    <div class="commodity-action">
                      <button 
                        class="add-to-cart-btn"
                        :disabled="commodity.status !== 1"
                        :class="commodity.status !== 1 ? 'btn-disabled' : ''"
                        @click="handleAddToCart(store, commodity)"
                      >
                        <i class="fa fa-shopping-cart"></i>
                        <span>{{ commodity.status === 1 ? '加入选购' : '已售完' }}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：订单表（仅在有选中商品时显示） -->
        <div 
          class="order-section" 
          :class="{ 'order-section-visible': isOrderMode }"
        >
          <div class="order-header">
            <h3>订单详情</h3>
            <div v-if="currentOrderStoreId" class="order-store-name">
              店铺：{{ getStoreName(currentOrderStoreId) }}
            </div>
          </div>

          <!-- 空订单状态 -->
          <div v-if="selectedItems.length === 0" class="empty-order">
            <i class="fa fa-shopping-cart"></i>
            <p>购物车是空的</p>
            <p class="tip-hint">添加商品到这里吧~</p>
          </div>

          <!-- 订单商品列表 -->
          <div v-else class="order-items">
            <div class="order-item" v-for="item in selectedItems" :key="item.commodityId">
              <div class="item-info">
                <span class="item-name">{{ item.commodityName }}</span>
                <span class="item-price">¥{{ formatPrice(item.price) }}</span>
              </div>
              <div class="item-actions">
                <button 
                  class="quantity-btn minus-btn"
                  @click="updateItemQuantity(item, -1)"
                  :disabled="item.quantity <= 1"
                >
                  <i class="fa fa-minus"></i>
                </button>
                <span class="item-quantity">{{ item.quantity }}</span>
                <button 
                  class="quantity-btn plus-btn"
                  @click="updateItemQuantity(item, 1)"
                >
                  <i class="fa fa-plus"></i>
                </button>
                <button 
                  class="remove-btn"
                  @click="removeItem(item)"
                >
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>

            <!-- 订单总计 -->
            <div class="order-summary">
              <div class="summary-row">
                <span>小计：</span>
                <span>¥{{ calculateSubtotal() }}</span>
              </div>
              <div class="summary-row total">
                <span>总计：</span>
                <span>¥{{ calculateTotal() }}</span>
              </div>
            </div>

            <!-- 支付方式选择 -->
            <div class="payment-method">
              <label class="method-label">支付方式：</label>
              <div class="method-options">
                <label class="method-option">
                  <input 
                    type="radio" 
                    v-model="payMethod" 
                    value="1"
                    checked
                  >
                  <span>支付宝</span>
                </label>
                <!-- <label class="method-option">
                  <input 
                    type="radio" 
                    v-model="payMethod" 
                    value="2"
                  >
                  <span>微信支付</span>
                </label> -->
              </div>
            </div>

            <!-- 订单操作按钮 -->
            <div class="order-actions">
              <button 
                class="cancel-btn"
                @click="cancelOrder"
              >
                <i class="fa fa-times"></i> 取消
              </button>
              <button 
                class="submit-btn"
                @click="submitOrder"
              >
                <i class="fa fa-check"></i> 提交订单并支付
              </button>
               
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 路由实例
const router = useRouter();

// 静态资源默认图
const defaultStoreImg = 'https://picsum.photos/id/292/100/100';
const defaultCommodityImg = 'https://picsum.photos/id/431/80/80';

// 状态管理
const isLoading = ref(true);
const errorMessage = ref('');
const businessStores = ref([]); // 所有营业中店铺
const searchResults = ref([]); // 搜索结果店铺
const expandedStoreId = ref(null);
const selectedItems = ref([]); // 选中的商品列表
const currentOrderStoreId = ref(null); // 当前订单所属店铺ID
const isOrderMode = computed(() => selectedItems.value.length > 0); // 是否处于订单模式
const searchKey = ref('');
const isSearching = ref(false);
const user_name = ref('')
const phone = ref('')
const payMethod = ref('1'); // 支付方式：1-支付宝
const userAddress = ref('doro小区1号'); // 用户地址，后续可从接口获取

// 页面加载时获取营业中店铺和用户地址
onMounted(() => {
  fetchBusinessStores();
  fetchUserAddress();
});

// 显示的店铺列表（根据搜索状态切换）
const displayStores = computed(() => {
  return isSearching.value ? searchResults.value : businessStores.value;
});

/**
 * 获取所有营业中店铺
 */
const fetchBusinessStores = async () => {
  try {
    isLoading.value = true;
    errorMessage.value = '';
    
    const response = await axios.get('/user/store/ready');
    const storesWithMenuState = response.data.map(store => ({
      ...store,
      commodities: [],
      isMenuLoading: false,
      menuError: ''
    }));
    
    businessStores.value = storesWithMenuState;
  } catch (err) {
    errorMessage.value = err.response?.data?.message || '获取营业店铺失败，请重试';
    console.error('获取营业店铺错误:', err);
  } finally {
    isLoading.value = false;
  }
};

/**
 * 获取用户信息
 */
const fetchUserAddress = async () => {
  try {
    const response = await axios.put('/user/user/info/');
    phone.value = response.data.phone
    // 如果地址为空，使用默认地址
    userAddress.value = response.data.address || 'doro小区1号';
  } catch (err) {
    console.error('获取用户信息失败', err);
  }
  try{
    const response = await axios.get('/user/user/now/');
    user_name.value = response.data.username
  } catch (err) {
    console.error('获取用户信息失败', err);
  }
};

/**
 * 获取指定店铺的菜品
 */
const fetchStoreMenu = async (storeId) => {
  const targetStore = businessStores.value.find(store => store.id === storeId);
  if (!targetStore) return;

  try {
    targetStore.isMenuLoading = true;
    targetStore.menuError = '';
    
    const response = await axios.get(`/user/store/${storeId}/commodity/`);
    targetStore.commodities = response.data.map(commodity => ({
      ...commodity,
      status_display: commodity.status === 1 ? '在售' : '已售完'
    }));
  } catch (err) {
    targetStore.menuError = err.response?.data?.message || '获取菜品失败，请重试';
    console.error(`获取店铺${storeId}菜品错误:`, err);
  } finally {
    targetStore.isMenuLoading = false;
  }
};

/**
 * 展开/收起店铺菜品菜单
 */
const toggleStoreMenu = async (storeId) => {
  if (expandedStoreId.value === storeId) {
    expandedStoreId.value = null;
    return;
  }

  const targetStore = businessStores.value.find(store => store.id === storeId);
  if (targetStore && targetStore.commodities.length === 0) {
    await fetchStoreMenu(storeId);
  }

  expandedStoreId.value = storeId;
};

/**
 * 格式化价格显示
 */
const formatPrice = (price) => {
  const numericPrice = Number(price);
  return isNaN(numericPrice) ? '0.00' : numericPrice.toFixed(2);
};

/**
 * 添加商品到订单
 */
// 确保添加商品时价格为数值类型
const handleAddToCart = (store, commodity) => {
  // 检查是否从不同店铺添加商品
  if (selectedItems.value.length > 0 && currentOrderStoreId.value !== store.id) {
    if (!confirm(`您当前正在选购【${getStoreName(currentOrderStoreId.value)}】的商品，是否清空当前商品并切换到【${store.name}】？`)) {
      return;
    }
    selectedItems.value = [];
  }

  currentOrderStoreId.value = store.id;

  // 检查商品是否已在购物车中
  const existingItem = selectedItems.value.find(
    item => item.commodityId === commodity.id
  );

  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    // 强制转换价格为数值类型，避免后续计算异常
    const numericPrice = Number(commodity.price) || 0;
    selectedItems.value.push({
      storeId: store.id,
      storeName: store.name,
      commodityId: commodity.id,
      commodityName: commodity.name,
      price: numericPrice, // 存储数值类型
      image: commodity.image,
      quantity: 1
    });
  }
};

/**
 * 更新商品数量
 */
const updateItemQuantity = (item, change) => {
  const index = selectedItems.value.findIndex(i => i.commodityId === item.commodityId);
  if (index !== -1) {
    selectedItems.value[index].quantity += change;
    
    // 如果数量为0，从列表中移除
    if (selectedItems.value[index].quantity <= 0) {
      selectedItems.value.splice(index, 1);
      
      // 如果购物车为空，重置订单状态
      if (selectedItems.value.length === 0) {
        currentOrderStoreId.value = null;
      }
    }
  }
};

/**
 * 从订单中移除商品
 */
const removeItem = (item) => {
  const index = selectedItems.value.findIndex(i => i.commodityId === item.commodityId);
  if (index !== -1) {
    selectedItems.value.splice(index, 1);
    
    // 如果购物车为空，重置订单状态
    if (selectedItems.value.length === 0) {
      currentOrderStoreId.value = null;
    }
  }
};

/**
 * 计算小计
 */
// 移除价格计算中的字符串转换，直接使用数值计算
const calculateSubtotal = () => {
  return selectedItems.value.reduce(
    (sum, item) => sum + (item.price * item.quantity), 
    0
  );
};

// 总计直接复用小计（后续可扩展运费等）
const calculateTotal = () => {
  return calculateSubtotal();
};

/**
 * 取消订单
 */
const cancelOrder = () => {
  if (selectedItems.value.length > 0 && confirm('确定要取消当前订单吗？')) {
    selectedItems.value = [];
    currentOrderStoreId.value = null;
  }
};

/**
 * 提交订单
 */
const submitOrder = async () => {
  if (selectedItems.value.length === 0) return;
  
  // 构建订单数据
  const orderData = {
    store: currentOrderStoreId.value,
    pay_method: Number(payMethod.value),
    sum: calculateTotal(),
    address: userAddress.value,
    order_details: selectedItems.value.map(item => ({
      commodity: item.commodityId,
      number: item.quantity,
      price: item.price
    }))
  };

  try {
    // 发送订单请求
    const response = await axios.post('/order/order/', orderData);
    // 获取订单ID
    const orderId = response.data.id; // 假设接口返回的数据中包含id字段
    alert('订单创建成功，即将跳转到支付页面');
    
    // 清空购物车
    selectedItems.value = [];
    currentOrderStoreId.value = null;
    
    // 跳转到Payment页面并携带订单ID
    router.push(`/payment?orderId=${orderId}`);
  } catch (err) {
    const errorMsg = err.response?.data?.message || '订单提交失败，请重试';
    alert(errorMsg);
    console.error('提交订单错误:', err);
  }
};

/**
 * 根据店铺ID获取店铺名称
 */
const getStoreName = (storeId) => {
  const store = businessStores.value.find(s => s.id === storeId) || 
                searchResults.value.find(s => s.id === storeId);
  return store ? store.name : '';
};

/**
 * 搜索店铺
 */
const handleSearch = async () => {
  if (!searchKey.value.trim()) return;
  
  try {
    isLoading.value = true;
    const response = await axios.get(`/user/store/search?key=${encodeURIComponent(searchKey.value.trim())}`);
    
    // 为搜索结果添加必要的状态属性
    const storesWithState = response.data.map(store => ({
      ...store,
      commodities: [],
      isMenuLoading: false,
      menuError: ''
    }));
    
    searchResults.value = storesWithState;
    isSearching.value = true;
  } catch (err) {
    errorMessage.value = err.response?.data?.message || '搜索店铺失败，请重试';
    console.error('搜索店铺错误:', err);
  } finally {
    isLoading.value = false;
  }
};

/**
 * 重置搜索，返回全部店铺
 */
const resetSearch = () => {
  searchKey.value = '';
  isSearching.value = false;
  searchResults.value = [];
};

/**
 * 返回首页
 */
const handleGoHome = () => {
  router.push('/home');
};

/**
 * 退出登录
 */
const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    localStorage.removeItem('token');
    router.push('/login');
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.consumer-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  color: #333;
}

/* 顶部导航 */
.consumer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 2rem;
  background-color: #ff7a5a;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.back-home-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.back-home-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.app-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

/* 搜索框样式 */
.header-search {
  flex: 1;
  max-width: 400px;
  margin: 0 2rem;
}

.search-box {
  display: flex;
  width: 100%;
}

.search-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 0.9rem;
  outline: none;
}

.search-btn {
  padding: 0 1rem;
  background-color: white;
  color: #ff7a5a;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #f1f1f1;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: white;
  color: #ff7a5a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  width: 100%;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: white;
  color: #ff7a5a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
}

/* 主内容区 */
.consumer-main {
  flex: 1;
  padding: 1.5rem 2rem;
}

.main-layout {
  display: flex;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* 店铺区域 */
.store-section {
  flex: 1;
  transition: all 0.3s ease;
}

.store-section-shifted {
  flex: 0 0 60%;
  animation: shiftLeft 0.3s ease;
}

@keyframes shiftLeft {
  from { transform: translateX(0); }
  to { transform: translateX(0); }
}

/* 订单区域 */
.order-section {
  width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.order-section-visible {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.order-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #f0f0f0;
}

.order-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  color: #333;
}

.order-store-name {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.empty-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  color: #999;
  text-align: center;
}

.empty-order i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #eee;
}

.order-hint {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.order-items {
  max-height: calc(100vh - 350px);
  overflow-y: auto;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 0.95rem;
  color: #333;
}

.item-price {
  font-size: 0.9rem;
  color: #ff7a5a;
  margin-top: 0.2rem;
  display: inline-block;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.quantity-btn:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  color: #999;
}

.minus-btn {
  color: #666;
}

.plus-btn {
  color: #ff7a5a;
  border-color: #ff7a5a;
}

.item-quantity {
  min-width: 24px;
  text-align: center;
  font-size: 0.9rem;
}

.remove-btn {
  color: #dc3545;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.remove-btn:hover {
  opacity: 1;
}

.order-summary {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.summary-row.total {
  font-weight: 600;
  color: #ff7a5a;
  font-size: 1.1rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed #e0e0e0;
}

.payment-method {
  margin: 1rem 0 1.5rem 0;
}

.method-label {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.method-options {
  display: flex;
  gap: 1.5rem;
}

.method-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.order-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn, .submit-btn {
  flex: 1;
  padding: 0.8rem 0;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cancel-btn {
  background-color: #f1f1f1;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e5e5e5;
}

.submit-btn {
  background-color: #ff7a5a;
  color: white;
}

.submit-btn:hover {
  background-color: #e66a4c;
  transform: translateY(-2px);
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #ff7a5a;
}

.loading-state i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* 错误状态 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #dc3545;
  text-align: center;
  padding: 1rem;
  background-color: #fff5f5;
  border-radius: 8px;
}

.error-state i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.reload-btn {
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  background-color: #ff7a5a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.reload-btn:hover {
  background-color: #e66a4c;
}

/* 店铺列表 */
.store-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.empty-store-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #666;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-store-state i {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  color: #ddd;
}

.empty-store-state .tip {
  margin-top: 0.5rem;
  color: #999;
  font-size: 0.9rem;
}

.store-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s;
  width: 100%;
}

.store-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.store-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.store-img-container {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.store-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-detail {
  min-width: 0;
}

.store-name {
  margin: 0 0 0.3rem 0;
  font-size: 1.1rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #666;
}

.store-location, .store-owner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.store-toggle {
  color: #999;
  font-size: 1.2rem;
  margin-left: 1rem;
}

.store-menu {
  padding: 1rem;
  background-color: #fafafa;
  border-top: 1px solid #f5f5f5;
}

.menu-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  color: #ff7a5a;
}

.menu-loading i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.menu-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  color: #dc3545;
  text-align: center;
}

.menu-error i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.reload-menu-btn {
  margin-top: 0.8rem;
  padding: 0.4rem 1rem;
  background-color: #ff7a5a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.empty-menu-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  color: #666;
}

.empty-menu-state i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #ddd;
}

.commodity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.commodity-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.8rem;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.commodity-img-container {
  width: 100%;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
}

.commodity-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commodity-info {
  flex: 1;
}

.commodity-name {
  margin: 0 0 0.2rem 0;
  font-size: 1rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commodity-price {
  font-size: 0.9rem;
  color: #ff7a5a;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.commodity-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-on-sale {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-sold-out {
  background-color: #fff5f5;
  color: #b71c1c;
}

.commodity-action {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  background-color: #ff7a5a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  width: 100%;
}

.add-to-cart-btn.btn-disabled {
  background-color: #ddd;
  color: #999;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .main-layout {
    flex-direction: column;
  }
  
  .store-section-shifted {
    flex: 1;
  }
  
  .order-section-visible {
    width: 100%;
    margin-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .consumer-header {
    padding: 0.8rem 1rem;
    flex-wrap: wrap;
  }
  
  .header-search {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 1rem 0 0 0;
  }
  
  .app-title {
    font-size: 1.2rem;
  }
  
  .consumer-main {
    padding: 1rem;
  }
  
  .store-meta {
    flex-direction: column;
    gap: 0.2rem;
  }
  
  .commodity-list {
    grid-template-columns: 1fr;
  }
}
</style>